<template>
<div class="app-container">
<el-card shadow="never" class="panel">
<div slot="header" class="panel__header">
<i class="el-icon-lock panel__icon"></i>
<div class="panel__title">权限申请</div>
</div>


<el-steps :active="step" finish-status="success" align-center>
<el-step title="填写信息"/>
<el-step title="提交申请"/>
<el-step title="等待审批"/>
</el-steps>


<el-form ref="formRef" :model="form" :rules="rules" label-width="110px" class="section">
<el-form-item label="资源类型" prop="resource_type">
<el-select v-model="form.resource_type" placeholder="请选择">
<el-option label="文件" value="file"/>
<el-option label="数据表" value="table"/>
<el-option label="设备" value="device"/>
</el-select>
</el-form-item>


<el-form-item label="资源ID" prop="resource_id">
<el-input v-model="form.resource_id" placeholder="例如：123" />
</el-form-item>


<el-form-item label="操作" prop="action">
<el-select v-model="form.action" placeholder="请选择">
<el-option label="读" value="read"/>
<el-option label="写" value="write"/>
<el-option label="管理" value="admin"/>
</el-select>
</el-form-item>


<el-form-item label="用途说明" prop="reason">
<el-input type="textarea" :rows="4" v-model="form.reason" placeholder="请简要说明用途" />
</el-form-item>


<el-form-item>
<el-button type="primary" :loading="loading" @click="submit">提交申请</el-button>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>


<el-alert v-if="result" :title="result" type="success" show-icon class="mt12"/>
</el-card>
</div>
</template>


<script>
import request from '@/utils/request'
export default {
name: 'PermissionApply',
data() { return { step: 0, loading: false, result: '', form: { resource_type: 'file', resource_id: '', action: 'read', reason: '' }, rules: { resource_type:[{required:true,message:'必选',trigger:'change'}], resource_id:[{required:true,message:'请填写资源ID',trigger:'blur'}], action:[{required:true,message:'必选',trigger:'change'}], reason:[{required:true,message:'请填写用途说明',trigger:'blur'}] } } },
methods: {
reset(){ this.$refs.formRef.resetFields(); this.step=0; this.result='' },
submit(){ this.$refs.formRef.validate(async ok=>{ if(!ok) return; this.loading=true; this.step=1; try{ const res= await request({ url:'/access/request/create', method:'post', data:this.form }) ; this.result='申请已提交，编号：'+ ((res&&res.data&&res.data.id)||'-'); this.$message.success('申请已提交'); this.step=2 }catch(e){ this.$message.error('提交失败：'+(e.message||'网络错误')) }finally{ this.loading=false } }) }
}
}
</script>


<style scoped>
.panel { border: 1px solid #ebeef5 }
.panel__header{ display:flex; align-items:center; gap:8px }
.panel__icon{ color:#5d86ff }
.section{ margin-top:12px }
.mt12{ margin-top:12px }
</style>